<template>
  <div>
    <el-container>
      <el-main>
        <el-container>
          <el-header class="header" style="padding: 0;">
            <el-form :inline="true">

              <el-form-item label="公众号" prop="appId">
                <el-select v-model="formData.appId" placeholder="选择公众号">
                  <el-option v-for="item in defaultPublicAccount" :key="item.appId" :label="item.publicAccountNickname" :value="item.appId"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="search">查询</el-button>
                <el-button type="primary" @click="addDeatil">新增黑名单策略</el-button>
              </el-form-item>
            </el-form>
          </el-header>
        </el-container>
        <el-table :data="blackList" style="width: 100%">
          <el-table-column label="公众号" prop="appId">
            <template slot-scope="scope">
              {{ changeappid(scope.row.appId) }}
            </template>
          </el-table-column>
          <el-table-column label="访问次数上限" prop="maxPv"></el-table-column>
          <el-table-column label="周期天数" prop="cycleDay"></el-table-column>
          <el-table-column label="是否开启" width="270">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isAlive" active-color="#13ce66" inactive-color="#ebebeb" @change="changeIsActive(scope.row.id, scope.row.isAlive)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="270">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="addDeatil(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            background
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
            :current-page="this.groupCollectionPage.page + 1"
            :page-sizes="[10, 20, 100, 300, 400]"
            :page-size="20"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.groupCollectionPage.totalElement">
          </el-pagination>
        </div>
      </el-main>
      <!-- 新增黑名单 -->
      <el-dialog :title="groupCollection.id?'修改黑名单策略':'新增黑名单策略'" :visible.sync="dialogFormVisible" top="13vh">
        <el-form :model="groupCollection" ref="groupCollection" :rules="rules">
          <el-form-item label="公众号" :label-width="formLabelWidth" prop="appId">
            <el-select v-model="groupCollection.appId" placeholder="选择公众号">
              <el-option v-for="item in defaultPublicAccount" :key="item.appId" :label="item.publicAccountNickname" :value="item.appId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="访问次数上限" :label-width="formLabelWidth" prop="maxPv">
            <el-input v-model="groupCollection.maxPv" auto-complete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="周期天数" :label-width="formLabelWidth" prop="cycleDay">
            <el-input v-model="groupCollection.cycleDay" auto-complete="off" clearable></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="formSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
  import service from '../../../service/count';

  export default {
    data() {
      const validatorNumber = (rule, value, callback)=> {
        if (typeof value === 'string'&&!value.match(/^[0-9]*$/)) {
          callback(new Error('请输入数字'));
        } else {
          if(value>0) {
            callback();
          } else {
            callback(new Error('请输入大于0的数字'));
          }
        }
      }
      return {
        openIds: '',
        formData: {},
        publicNumberName: '',
        blackList: [],
        dialogFormVisible: false,
        formLabelWidth: '110px',
        defaultPublicAccount: [],
        groupCollection: {},
        groupCollectionPage: {
          page: 0,
          size: 20,
          keyword: '',
          totalElement: 1,
        },
        rules: {
          appId: [
            {
              required: true, message: '请选择公众号', trigger: 'blur',
            }
          ],
          maxPv: [
            {
              required: true, message: '请输入访问次数上限', trigger: 'blur',
            },
            { validator: validatorNumber },
          ],
          cycleDay: [
            {
              required: true, message: '请输入周期天数', trigger: 'blur',
            },
            { validator: validatorNumber },
          ],
        },
      };
    },
    mounted() {
      this.initData()
      this.initList()
    },
    computed: {
    },
    methods: {
      search(){
        this.formData.page = 0
        this.initList()
      },
      initData() {
        this.$store.dispatch('getPublicAccountsWithDefault', this.defaultPublicAccount).then((res) => {
          this.defaultPublicAccount = res;
          console.log(this.defaultPublicAccount)
        });
      },
      changeappid(appid) {
        let name
        this.defaultPublicAccount.map((item)=> {
          if(item.appId === appid) {
            name =  item.publicAccountNickname
          }
        })
        return name
      },
      initList() {
        this.formData.page = this.groupCollectionPage.page
        this.formData.size = this.groupCollectionPage.size
        service.blackTacticsList(this.formData).then((res)=> {
          this.blackList = res.list
          this.blackList.map((item, index)=> {
            this.blackList[index].isAlive = item.isAlive === 1
          })
          this.groupCollectionPage.totalElement = res.total
        })
      },
      formSubmit() {
        this.$refs.groupCollection.validate().then(() => {
          if (this.groupCollection.id) {
            delete this.groupCollection.isAlive
            service.blackTacticsUpdate(this.groupCollection).then((res) => {
              this.$message({
                type: 'success',
                message: res
              });
              this.dialogFormVisible = false
              this.initList()
            });
          } else {
            service.blackTacticsCreate(this.groupCollection).then((res) => {
              if (res && res.status == 500) {
                this.$message({
                  type: 'error',
                  message: res.data
                });
              } else {
                this.$message({
                  type: 'success',
                  message: res
                });
              }
              this.dialogFormVisible = false
              this.initList()
            });
          }
        })
      },
      delData(appId) {
        this.groupCollection = {
          appId: appId,
          dataUrl: ''
        }
        this.formSubmit()
      },
      addDeatil(data) {
        this.dialogFormVisible = true
        this.$nextTick(()=> {
          this.$refs.groupCollection.resetFields();
          if(data) {
            this.groupCollection = {...data}
          } else {
            this.groupCollection = {
              appId: '',
              maxPv: '',
              cycleDay: ''
            }
          }
        })
      },
      changeIsActive(id, isAlive) {
          service.blackTacticsUpdate({id,isAlive: isAlive?1:0}).then((res)=> {
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.initList()
          })
      },
      handlePageSizeChange(size) {
        this.groupCollectionPage.size = size;
        this.initList()
      },
      handleCurrentPageChange(page) {
        this.groupCollectionPage.page = page-1;
        this.initList()
      },
      close() {
        this.dialogFormVisible = false
      },
    },
  };
</script>

<style lang="less" scoped>
  .page {
    margin-top: 20px;
    text-align: right;
  }
  .avatar {
    width: 150px;
    height: 150px;
  }
</style>

